<template>
  <div class="main">
    <div class="title">花卉查询</div>
    <div class="search-bar">
      <el-input
      v-model="searchQuery"
      class="searchText"
      placeholder="请输入花名"
      @input="handleInput"
      @keydown.enter="handleSearch"
    />
      <el-button @click="handleSearch">搜索</el-button> 
    </div>
    
  </div>
</template>
  
  <script>
  export default {
    name: 'SearchBar',
    data() {
      return {
        searchQuery: '', // 搜索关键词
      };
    },
    methods: {
      handleInput() {
      },
      handleSearch() {
        this.$emit('searchClick',this.searchQuery)
      },
    },
  };
  </script>
  
  <style scoped>
  .main{
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(181deg, #ffeee7, #fff1e300);
    /* flex-direction: column; */
    margin-top: 30px;
  }
  .search-bar {
    width: 1100px;
    justify-content: flex-end;
    margin: 1%;
    display: flex;
  
  }
  
  .searchText {
    margin-right: 10px;
    width: 200px
  }
  .title{
    width: 297px;
    color: #fff;
    font-family: fangsong;
    font-size: 59px;
    font-weight: bolder;
    margin-top: -3%;
    text-shadow: 3px -5px 2px #d06f3b;
    font-style: oblique;

  }

  </style>
  